{% extends 'home/public/base.html' %}

{% block css %}
<link rel="stylesheet" type="text/css" href="/static/home/public/css/cart.css">
<link rel="stylesheet" type="text/css" href="/static/home/public/css/cart-app.css">
{% endblock %}

{% block mbx %}
<div class="navbar-left">
	<ol class="breadcrumb">
		<li class="active">购物车</li>
		<li>确认订单</li>
		<li>在线支付</li>
		<li>完成 </li>
	</ol>
</div>

{% endblock %}

{% block con %}
<br><br><br><br>
<!-- 主内容区域 -->
    <div class="mainbody cart cart-app">
		<div class="container">
			<h4>收货信息确认
			<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">添加收货地址</button>
			</h4>
			<div class="row">
				<div class="col-md-10 col-md-offset-1">
					<div class="row">
						{% for v in address %}
						<div class="col-md-3 address-items" aid="{{ v.id }}" ischecked="{{ v.status }}" {% if v.status == 1 %} style="border:2px solid red;margin-left:5px;margin-top:5px;" {% else %} style="border:2px  dashed black;margin-left:5px;margin-top:5px;" {% endif %} >
							<address>
								<strong>收货人:{{ v.aname }}</strong><br>
								收货地址:{{ v.aads }}<br>
								<abbr title="Phone">收货电话:{{ v.aphone }}</abbr>
							</address>
						</div>
						{% endfor %}
						
					</div>
				</div>
			</div>
		</div>

		<!-- Button trigger modal -->
		<!-- Modal -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<form action="{% url 'orderconfirm' %}?ids={{ request.GET.ids }}" method="post">
						{% csrf_token %}
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>
						</div>
						<div class="modal-body">
							<div class="form-group">
								<label for="exampleInputEmail1">收货人</label>
								<input type="text" name="aname" class="form-control" placeholder="收货人">
							</div>
							<div class="form-group">
								<label for="exampleInputEmail1">收货电话</label>
								<input type="text" name="aphone" class="form-control" placeholder="收货电话">
							</div>
							<div class="form-group">
								<label for="exampleInputEmail1">收货地址</label>
								<input type="text" name="aads" class="form-control" placeholder="收货地址">
							</div>
							<div class="checkbox">
								<label >
									<input type="checkbox" name="status" value="1">是否设为默认地址
								</label>
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
							<button class="btn btn-primary">保存</button>
						</div>
					</form>
				</div>
			</div>
		</div>


		<div class="container">
			<h4>商品信息确认</h4>
			<!-- 购物车详情头 -->
			<table class="cart-header">
				<tbody>
					<tr>
						<td class="cart-col-name col-md-3 hidden-xs hidden-sm">图片</td>
						<td class="cart-col-name col-md-3 hidden-xs hidden-sm">商品</td>
						<td class="cart-col-price col-md-2 hidden-xs hidden-sm">单价(元)</td>
						<td class="cart-col-number col-md-2 hidden-xs hidden-sm">数量</td>
						<td class="cart-col-total col-md-1 hidden-xs hidden-sm">小计(元)</td>

					</tr>
				</tbody>
			</table><!-- 购物车详情头 E-->
			
			<!-- 购物清单信息列表 -->
			<div class="cart-merchant-list">
				<div class="cart-merchant">
					<table class="cart-merchant-body">
						<tbody>
							{% for v in request.session.order.values %}
							<tr class="cart-product" gid="{{ v.id }}">
								<td class="cart-col-select col-md-3 col-xs-4 col-sm-4">  
									<a href="{% url 'info' v.id %}" class="cart-product-link" target="_blank">
										<img src="{{ v.pic }}" class="cart-product-img" alt="{{ v.name }}">
									</a>
								</td>
								<td class="cart-col-name col-md-3 col-xs-8 col-sm-8">
									<a href="{% url 'info' v.id %}" class="cart-product-link" target="_blank">
									  <p>{{ v.title }}</p>
									</a>
	
								</td>
								<td class="cart-col-price col-md-2 hidden-xs hidden-sm">
									<p>
										<span class="cart-product-price" price="{{ v.price }}" >{{ v.price }}</span>
									</p>
								</td>
								<td class="cart-col-number col-md-2 hidden-xs hidden-sm">
									<div class="cart-product-number-adder">
										<p class="cart-product-number-max show"></p>
										<div class="mz-adder cartnum" gid="{{ v.id }}">
							
											<div class="mz-adder-num"><input class="mz-adder-input" value="{{ v.num }}" type="text" disabled></div>
									
										</div>
									</div>
								</td>
								{% load pagetag %}
								<td class="cart-col-total col-md-1 hidden-xs hidden-sm">
									<span class="cart-product-price total">{% cheng v.num v.price %}</span>
								</td>

							</tr>
							{% endfor %}

						</tbody>
					</table>
				</div>
			</div><!-- 购物清单信息列表 E-->
		</div>
		<!-- 结算详情 -->
		<div class="cart-footer" id="cartFooter">
			<div class="container">
			   <div class="cart-footer-left col-md-6 col-xs-4 col-sm-4">
				   <span class="cart-footer-count">
						共
						<span class="cart-footer-num" id="totalCount">0</span>
						件商品
				   </span>
				</div>
				<div class="cart-footer-right col-md-5 col-md-offset-1 col-sm-offset-2 col-xs-8 col-sm-6">
					<span class="cart-footer-sum">
						<span class="cart-footer-text">已优惠</span>
						<span class="cart-footer-num red" id="totalDiscount">0.00</span>
						<span class="cart-footer-text">元， 合计(不含运费)：</span>
						<span class="cart-footer-total" id="totalPrice">0.00</span>
					</span>
					<form id="createFrom" action="{% url 'ordercreate' %}" method='post' style="display:inline-block">
						{% csrf_token %}
						<input type="hidden" name="addressid" value="">
						<button class="mz-btn success" >提交订单</button>
					</form>
				</div>
			</div>
		</div><!-- 结算详情 E-->
	</div>
    <!-- 主内容区域 E-->
{% endblock %}


{% block js %}
<script type="text/javascript">

//回顶部
backTop();
//顶部导航鼠标经过出现内容
topNav();
//登录图片鼠标经过
topLogin();



// 商品总数计算
function totalPrice(){

	// 价格小计
	var total = 0;
	// 选中商品的id组成数组
	var ids =[];
	// 选中商品的个数
	var totalCount = 0;
	// 获取已经选择的元素
	
	$('.cart-product').each(function(){
		p = $(this).find('.total').text();
		total += Number(p);

		c = $(this).find('.mz-adder-input').val();
		totalCount += Number(c);

		ids.push($(this).attr('gid'));
	});

	$('#totalPrice').text(total);
	$('#totalCount').text(totalCount);


	return ids;
}

totalPrice();




// 去结算
$('#cartSubmit').click(function(){
	// 得到结算产品的id
	ids = totalPrice();
	if (ids.length == 0){
		alert('请选择购买的产品')
	}else{
		location.href="/order/confirm/?ids="+ids.join(',')
	}

});


// 给所有的地址 绑定单击事件
$('.address-items').click(function(){
	// 给当前选择的地址添加样式
	$(this).css('border','2px solid red').siblings().css('border','2px dashed black')
	// 把当前选择的地址id添加到表单中
	aid = $(this).attr('aid')
	$('input[name=addressid]').val(aid)
});

// 把默认地址添加到表单中
var aid = $('.address-items[ischecked=1]').attr('aid')
$('input[name=addressid]').val(aid)

// 表单事件，确认是否选择了地址
$('#createFrom').submit(function(){
	// 确认是否选择了地址
	aid = $('input[name=addressid]').val()
	if(!aid){
		alert('请选择收货地址')
		return false;
	}
});


</script>
{% endblock %}